<template>
  <div class="order-item w-full p-30rpx flex-column bg-white rounded-xl">
    <div class="w-full flex items-center" @click="handleOrderClick">
      <div
        class="w-70rpx h-70rpx flex-shrink-0 rounded-lg overflow-hidden bg-hex-f1f1f1" @click.stop="imageShow = true"
      >
        <image
          class="wh-full"
          :src="props.orderInfo?.cover ?? ''"
          mode="aspectFill"
        />
      </div>
      <div class="ml-20rpx text-30rpx truncate">
        {{ props.orderInfo?.couponName ?? "" }}
      </div>
      <div class="ml-auto flex-shrink-0 flex-column flex-center">
        <span class="text-hex-666 text-24rpx">取餐号</span>
        <div class="mt-4rpx text-primary text-32rpx font-bold">
          {{ props.orderInfo?.pickupCode ?? "----" }}
        </div>
      </div>
      <div class="ml-auto" v-if="!props.orderInfo.isMade">
        <u-button
          type="warning"
          shape="circle"
          :custom-style="{ backgroundColor: '#f4756b' }"
          @click="handleOrderBtn(props.orderInfo)"
          >{{ props.btnText ?? "出餐" }}</u-button
        >
      </div>
    </div>
    <div
      v-show="showMore"
      class="w-full mt-30rpx pt-30rpx flex-column text-26rpx border-0 border-t-2rpx border-solid border-hex-f1f1f1"
    >
      <div class="flex items-center mb-20rpx overflow-hidden">
        <div class="flex-shrink-0">订单编号：</div>
        <div class="truncate">{{ props.orderInfo?.couponNo ?? "-" }}</div>
        <i
          class="fa far fa-clone ml-20rpx flex-shrink-0 text-hex-888 text-24rpx"
          aria-hidden="true"
          @click="copyGrouponId"
        />
      </div>
      <div class="flex mb-20rpx">
        <div class="flex-shrink-0">核销时间：</div>
        <div>
          {{
            formatDateTime(
              props.orderInfo?.validTime ?? "",
              "yy-mm-dd hh:mm:ss"
            )
          }}
        </div>
      </div>
      <div class="flex mb-20rpx">
        <div class="flex-shrink-0">实付金额：</div>
        <div>{{ formatPrice(props.orderInfo?.payment ?? 0) }}</div>
      </div>
      <div
        v-if="props.orderInfo?.pickupType === 'TAKEOUT'"
        class="flex mb-20rpx items-center"
      >
        <div class="flex-shrink-0">姓名：</div>
        <div class="font-bold">
          {{ formatContactName(props.orderInfo?.contactName ?? "") }}
        </div>
      </div>
      <div class="flex mb-20rpx items-center">
        <div class="flex-shrink-0">联系方式：</div>
        <div class="flex" @click="handleCall(props.orderInfo?.phone ?? '')">
          <div class="font-bold">{{ props.orderInfo?.phone ?? "" }}</div>
          <div class="ml-20rpx"><u-icon name="phone" size="29"></u-icon></div>
        </div>
      </div>
      <div
        v-if="props.orderInfo?.pickupType === 'TAKEOUT'"
        class="flex mb-20rpx items-center"
      >
        <div class="flex-shrink-0">地址：</div>
        <div class="font-bold">{{ props.orderInfo?.address ?? "" }}</div>
      </div>
      <div class="flex mb-20rpx items-center">
        <div class="flex-shrink-0">备注：</div>
        <div class="font-bold">{{ props.orderInfo?.comment ?? "" }}</div>
      </div>
      <div class="flex flex-center text-primary" @click="changeShowMoreStatus">
        <span>收起</span>
        <i class="fas fa-angle-up ml-10rpx" aria-hidden="true" />
      </div>
    </div>
    <u-mask :show="imageShow" @click="imageShow = false">
      <div  class="wh-full warp" >
          <image class="w-full" :src="props.orderInfo?.cover ?? ''" mode="widthFix" />
        </div>
    </u-mask>
  </div>
</template>

<script setup lang="ts">
import { StoreCouponOrderVo } from "@/service/api/modules/store/response";
import {
  formatDateTime,
  formatPrice,
  formatContactName,
} from "@/common/filters";

interface OrderItemProps {
  orderInfo: StoreCouponOrderVo;
  customBtnFunc?: Function | null;
  btnText?: string;
}

const props = defineProps<OrderItemProps>();

// 是否显示更多
const showMore = ref(false);
const imageShow = ref(false);

const handleOrderClick = () => {
  !showMore.value && changeShowMoreStatus();
};

const changeShowMoreStatus = () => {
  showMore.value = !showMore.value;
};

// 复制编号
const copyGrouponId = (): void => {
  uni.setClipboardData({
    data: props.orderInfo?.couponNo ?? "",
  });
};

// 点击按钮
const handleOrderBtn = (data: StoreCouponOrderVo) => {
  if (typeof props.customBtnFunc === "function") {
    props.customBtnFunc(data);
  } else {
    handleOrderClick();
  }
};

// 拨打电话
const handleCall = (phone: any) => {
  uni.makePhoneCall({
    phoneNumber: phone,
  });
};
</script>

<style scoped lang="scss">
.warp {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>
